<template>
  <a-modal
    v-model:visible="modalVisible"
    @cancel="closeModal"
    width="600px"
    :top="100"
    :align-center="false"
    title="新增角色互斥"
    @ok="handleSubmit"
  >
    <template #footer>
      <a-button @click="closeModal">取消</a-button>
      <a-button type="primary" @click="handleSubmit">确定</a-button>
    </template>
    <a-form
      :rules="rules"
      :auto-label-width="true"
      :model="form.list"
      ref="formRef"
    >
      <!-- :load-more="loadMore" -->
      <a-form-item
        field="mutuallyExclusiveRoleIds"
        label="互斥角色:"
        allow-clear
      >
        <a-cascader
          :field-names="fieldNames"
          :options="GetMenuData"
          v-model="form.list.mutuallyExclusiveRoleIds"
          check-strictly
          multiple
          :load-more="loadMore"
          placeholder="请选择上层文件夹"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import {
  getRoleList,
  getRoleListAll,
  postRoleExclusive
} from '@/apis/roleManagement/index';
import { RoleList } from '@/apis/roleManagement/type';
import { cloneDeep } from 'lodash';

const emit = defineEmits(['update:visible', 'addRoleExclusive']);
const getTreeData = ref([]);
const envList: Array<string> = [];
for (const item in import.meta.env) {
  if (item.indexOf('VITE') === 0) {
    envList.push(item);
  }
}
const fieldNames = { value: 'id', label: 'roleName' };
const GetMenuData = ref([]);
const getRoleData = async () => {
  try {
    const res = await getRoleList({ parentMenuId: 0 });
    GetMenuData.value = res.roleList;
  } catch (err: unknown) {
    console.log(err);
  }
};

const props = withDefaults(
  //参数说明
  defineProps<{
    editCompanyForm: any; //修改的数据
    visible: boolean; //是否打开modal
  }>(),
  {
    visible: false
  }
);
// 控制确定取消按钮
const modalVisible = computed({
  //控制visible
  get() {
    return props.visible;
  },
  set() {
    return emit('update:visible', false);
  }
});

const form = reactive<any>({
  list: {
    mutuallyExclusiveRoleIds: [] //互斥角色id
  }
});

// const loadMore = async (option: any, done) => {
//   const res = await getRoleList({ parentMenuId: option.id });
//   done(res.roleList);
// };

const rules = {
  mutuallyExclusiveRoleIds: [{ required: true, message: '请选择互斥的角色' }]
};

const loadMore = (option: any, done: any) => {
  window.setTimeout(async () => {
    const res = await getRoleList({ parentRoleId: option.id });
    await done(res.roleList);
  }, 1000);
};

//取消
const closeModal = () => {
  modalVisible.value = false;
  formRef.value.resetFields();
};
const formRef = ref();
const visible = ref(false);
const handleSubmit = async () => {
  const valid = await formRef.value.validate();
  if (!valid) {
    const action = form.list.id ? 'edit' : 'add';
    emit('addRoleExclusive', cloneDeep(form.list), action);
    closeModal();
    visible.value = false;
  }
};

onMounted(() => {
  getRoleData();
  if (props.editCompanyForm.id) {
    form.list = props.editCompanyForm;
    console.log(form.list);
  }
});
</script>
